<template>
  <div id="android">
    <el-card class="box-card" shadow="hover" v-for="app in appInfo" :key="app.id">
      <section class="container">
        <div>
          <img :src="app.iconUrl" alt />
        </div>
        <div>
          <h3>{{app.appName}}</h3>
          <p>应用包名：{{app.packageName}}</p>
          <p>版本号：{{app.versionId}}</p>
          <p>上架时间：{{app.releaseTime}}</p>
        </div>
        <div>
          <el-button type="info" plain @click="appDetails" :value="app.id">修改应用信息</el-button>
        </div>
      </section>
    </el-card>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      appInfo: []
    }
  },
  created: function () {
    this.getAppInfo()
  },
  methods: {
    getAppInfo() {
      this.$http
        .get("app/list", { params: { "pageNum": 1, "pageSize": 10 } })
        .then(result => {
          //通过$http获取的数据，都在result.body中存放
          var result = JSON.parse(JSON.stringify(result.body))
          if (result.code == "1001") {
            //console.log(result.data)
            // 判断是 ios 还是 android
            for (var i in result.data) {
              if (result.data[i].platform.toLowerCase() == 'android') {
                //var appArr = []
                this.appInfo.push(result.data[i])
              }
            }
            //console.log(this.appInfo)

          } else {
            alert("获取失败")
          }
        })
    },
    appDetails: function (e) {
      //获取当前点击的 DOM对象 的 value 值
      var id = e.currentTarget.value
      this.$router.push({
        path: "details",
        name: 'Details',
        params: {
          "id": id
        }
      })
    }
  }
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.text {
  font-size: 14px;
}

.item {
  padding: 10px 0;
}

#android .box-card {
  width: 100%;
  margin-bottom: 5px;
}

.box-card:hover {
  background-color: #f2f6fc;
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
}
.container div {
  width: 100%;
}
.container div:nth-child(1) {
  flex: 1;
}
.container div:nth-child(1) img {
  height: 85px
}
.container div:nth-child(2) {
  flex: 8;
}
.container div:nth-child(2) h3{
  font-family: "微软雅黑";
}
.container div:nth-child(2) p {
  color: #576573;
  font-size: 13px;
  margin: 4px auto;
}
.container div:nth-child(3) {
  flex: 3;
  text-align: center;
  padding-top: 20px;
}

</style>